{{Template:SZPT-CHINA/head}}
<html>

<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg');//选取id为test的元素
        loadImg.style.display = 'block';	// 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function () {
            //$("#loaderDownId").hide();
            //滑到顶部
            //document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);




        //


    }
    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }



    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
// 视频加载好
// function hideLoad() {
//     console.log("视频加载好了", loadhidekey)

//     if (loadhidekey == 1) {
//         setTimeout(function () {
//             //$("#loaderDownId").hide();
//             $("#loadingHome").hide();
//             //$("#loading").hide();
//         }, 10);
//     }
//     else if (loadhidekey == 0) {
//         loadhidekey = 1;
//     }
// }
//END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", p);
        $("#bg4").attr("style", bg);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Parts";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Contribution";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Engineering";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Improvement";
        });

    });
</script>
<script>

    $(document).ready(function () {
        $("#dir1").hover(function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });

    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 6%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/8/86/T--SZPT-CHINA--part-overview.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/2/2b/T--SZPT-CHINA--part-contribution.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/d/d9/T--SZPT-CHINA--part-engineering.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/7/75/T--SZPT-CHINA--part-improvement.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/3/3d/T--SZPT-CHINA--Improvement_font.png"
                    style="margin-top: -50px;margin-left: 550px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 6000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p"
                        style="color:#fffea4;margin-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Improvement</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1"
                            style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p"
                                style="font-size: 1.2rem;padding-top: 0vh;;">
                                Background
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Goal
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir3p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Proof of expression</p>
                        </div>


                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">● Background

                </div>

                <div class="pb">
                    An inducible promoter is often used to control the expression of lysis protein in bacteria. However,
                    a
                    background level of lysis protein could often cause great pressure to the host bacteria. Since
                    accumulation of lysis protein would induce autolysis, or drive the emergence of loss-of-function
                    mutations in coding sequence (CDS) or ribosome-binding sequence (RBS) [1].
                </div>


                <div id="content2" class="yj">● Goal

                </div>

                <div class="pb">
                    Modulate the expression of lysis protein by random mutagenesis in the RBS region, which can enable
                    our
                    host bacteria to produce effective lysis proteins in a more steady fashion.
                </div>

                <div id="content3" class="yj">
                    ● Proof of expression

                </div>
                <div class="ej">

                    Screening the suitable RBS for our system by the auto-lysis action
                </div>

                <div style="margin-top: 50px;">
                    <div class="ps">
                        Mutagenesis at specific position of RBS (<a
                            href="http://parts.igem.org/Part:BBa_B0034">BBa_B0034</a>) was achieved using random primers
                        and
                        PCR, and
                        the constructed plasmid was transformed into <i>E. coli</i> DH5α. 12 single colonies were
                        selected
                        to
                        streak on two new LB plates to have two identical copies. Both plates were incubated at 37 ℃ for
                        12-16 hours, with one under blue light with a weavelenth of 470nm while the other under dark
                        condition (<span style="color:blue;">Figure 1</span>). Colonies that grew normally in the dark
                        but
                        not under the blue light
                        irradiation met our needs, since the expression of lysis protein successfully expressed at the
                        latter illumination condition could inhibit bacterial growth. The culture of eligible bacterial
                        isolates were then sent for Sangon sequencing to obtain the corresponding RBS sequence ((<span
                            style="color:blue;">Table 1&2</span>).
                    </div>
                </div>
                <div style="display: flex;text-align: center;margin-top: 50px;margin-left: 100px;">
                    <img src="https://2021.igem.org/wiki/images/8/8c/T--SZPT-CHINA--improvement-pic-1.png"
                        style="float: left;"></img>
                    <img src="https://2021.igem.org/wiki/images/7/74/T--SZPT-CHINA--improvement-pic-2.png"
                        style="float: left;margin-left: 60px;"></img>

                </div>
                <div class="tz">Figure 1. Colony growth of <i>E. coli</i>
                    DH5α-pDawn-RBSNNN-LKD-pSEVA331 under blue light (Left) or in the dark (Right).
                </div>
                <div class="ej">
                    Fluorescence quantitative analysis to screen the RBS
                </div>
                <div style="margin-top: 50px;">
                    <div class="ps">
                        The RBS region of J23100-B0034-sfGFP -pSEVA331(<a
                            href="http://parts.igem.org/Part:BBa_K3740058">BBa_K3740058</a>) was replaced respectively
                        by
                        the
                        abovemetioned RBS004 (<a href="http://parts.igem.org/Part:BBa_K3740018">BBa_K3740018</a>),
                        RBS009
                        (<a href="http://parts.igem.org/Part:BBa_K3740008">BBa_K3740008</a>), and RBS010 (<a
                            href="http://parts.igem.org/Part:BBa_K3740010">BBa_K3740010</a>) to obtain an
                        array of resultant plasmids as listed in <span style="color:blue;">Table 1</span>. These
                        plasmids
                        were then transformed into <i>E. coli</i>
                        competent cells.
                    </div>

                    <div class="ps">
                        Using micro-plate reader, we quantified the fluorescence intensity when the optical absorbance
                        of
                        bacterial culture at 600nm was around 0.2 [2], to determine the strength of the mutated RBS and
                        B0034.
                    </div>

                    <div class="ps">
                        As shown in <span style="color:blue;">Figure 2 </span>and <span style="color:blue;">Table
                            2</span>,
                        the reporter gene expression level in isolate 2, 3 and 4 was much
                        lower than that of isolate 1. The average fluorescence intensity of sfGFP induced by RBS004
                        (<a href="http://parts.igem.org/Part:BBa_K3740018">BBa_K3740018</a>), RBS009 (<a
                            href="http://parts.igem.org/Part:BBa_K3740008">BBa_K3740008</a>) and RBS010 (<a
                            href="http://parts.igem.org/Part:BBa_K3740010">BBa_K3740010</a>) was less than 3% of B0034
                        (<a href="http://parts.igem.org/Part:BBa_B0034">BBa_B0034</a>),
                        <strong>which means reducing the pressure to the host bacteria.</strong>
                    </div>
                </div>
                <div class="tz" style="margin-top: 50px;">
                    Table 1. Information related to the plasmids derived from B0034
                </div>
                <table border="1" style="font-size: 200%;text-align: center;">
                    <tr>
                        <td style="width: 207px;">Number</td>
                        <td style="width: 600px;">Full name of corresponding plasmid </td>
                        <td style="width: 100px;">RBS ID</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>J23100-B0034-sfGFP-pSEVA331</td>
                        <td>B0034</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>J23100-RBS004-sfGFP-pSEVA331</td>
                        <td>B0034</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>J23100-RBS009-sfGFP-pSEVA331</td>
                        <td>RBS009</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>J23100-RBS010-sfGFP-pSEVA331</td>
                        <td>RBS009</td>
                    </tr>
                </table>
                <img src="https://2021.igem.org/wiki/images/8/80/T--SZPT-CHINA--improvement-pic-3.png"
                    style="width: 824px;margin-left: 127px;"></img>
                <div class="tz">
                    Figure 2. The sfGFP inducible expression by different RBS. 1, isJ23100-B0034-sfGFP-pSEVA331-DH5α; 2,
                    is J23100-RBS004-sfGFP-pSEVA331-DH5α; 3, is J23100-RBS009-sfGFP-pSEVA331-DH5α; 4, is
                    J23100-RBS010-sfGFP-pSEVA331-DH5α</div>

                <div class="tz" style="margin-top: 50px;">
                    Table 2. Information related to RBS used in this study
                </div>
                <table border="1" style="font-size: 200%;    text-align: center;">
                    <tr>
                        <td>number</td>
                        <td>RBS</td>
                        <td>BBa</td>
                        <td>sequence</td>
                        <td style="    line-height: 28px;
                    ">average fluorescence intensity （a.u.）</td>
                        <td>ratio</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>B0034</td>
                        <td><a href="http://parts.igem.org/Part:BBa_B0034">BBa_B0034</a></td>
                        <td>aaagaggagaaa</td>
                        <td>23498.40742</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>RBS004</td>
                        <td><a href="http://parts.igem.org/Part:BBa_K3740018">BBa_K3740018</a></td>
                        <td>aa<span style="color:red;">G</span>ga<span style="color:red;">T</span>g<span
                                style="color:red;">TG</span>aaa</td>
                        <td>420.0416198</td>
                        <td>0.017875323</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>RBS004</td>
                        <td><a href="http://parts.igem.org/Part:BBa_K3740008">BBa_K3740008</a></td>
                        <td>
                            aa<span style="color:red;">G</span>ga<span style="color:red;">C</span>g<span
                                style="color:red;">TG</span>aaa
                        </td>
                        <td>607.8410133</td>
                        <td>0.025867328</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>RBS010</td>
                        <td><a href="http://parts.igem.org/Part:BBa_K3740010">BBa_K3740010</a></td>
                        <td>aa<span style="color:red;">C</span>ga<span style="color:red;">A</span>g<span
                                style="color:red;">CG</span>aaa</td>
                        <td>255.1001708</td>
                        <td>0.010856062</td>
                    </tr>
                </table>
                <div id="content4" class="yj">● References

                </div>

                <div class="pb">

                    [1]Dai Z , Lee A J , Roberts S , et al. Versatile biomanufacturing through stimulus-responsive
                    cell-material feedback [J]. Nature Chemical Biology, 2019, 15(10): 1017-1024.


                    [2]Zhang H M , Chen S , Shi H , et al. Measurements of Gene Expression at Steady State Improve the
                    Predictability of Part Assembly [J]. Acs Synthetic Biology, 2016, 5(3): 269.
                </div>
            </div>



            <div id="red" style="float: left;margin-left: 140px; height: 6000px;width: 55px;background-color: #d44225;">
            </div>

        </div>
       
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
        style="margin-top: -372px;width: 1920px;"></image>
    </div>

</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/6000/, "8000")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/6000/, "8000")
            $("#red").attr("style", value);



            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 930;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>